<script lang="ts" setup>
import { reactive } from 'vue'
import { getArtistDesc } from '@/api/artist'
import type { TopicDatum, Introduction } from '@/types/artist/index'
const props = defineProps<{
  id: number
}>()
const state = reactive({
  briefDesc: '',
  introduction: [] as Introduction[],
  topicData: [] as TopicDatum[],
  loading: true,
})

const getArtistInfo = async () => {
  state.loading = true
  const { data } = await getArtistDesc(props.id)
  state.loading = false
  if (data.code !== 200) return ElMessage.error('获取失败')
  const { briefDesc, introduction, topicData } = data
  state.briefDesc = briefDesc
  state.introduction = introduction
  state.topicData = topicData
}
getArtistInfo()
</script>

<template>
  <div v-loading="state.loading" v-for="item in state.introduction" :key="item.ti">
    <div class="font-bold py-5 text-sm">{{ item.ti }}</div>
    <div class="text-xs text-slate-500 leading-7 info" v-html="item.txt"></div>
  </div>
</template>

<style lang="less" scoped>
.info {
  white-space: pre-wrap;
}
</style>
